<!--  -->
<template>
  <div class="order-page">
    <van-sticky>
      <c-title :hide="false" text='已兑换藏品'></c-title>
      <van-tabs :active="tabIndex"  line-width="15" title-active-color="var(--themeBaseColor)" title-inactive-color="#00001C" color="var(--themeBaseColor)" @click="orderTabOn">
        <block v-for="(item,index) in orderTab" :key="index" >
          <van-tab :title="item.name" :name="item.status"></van-tab>
        </block>
      </van-tabs>
    </van-sticky>
    <div class="order-list" v-if="orderTab[tabIndex] && orderTab[tabIndex].goodsList.length > 0">
      <block v-for="(item,index) in orderTab[tabIndex].goodsList" :key="index">
        <goods-item :item="item.exchange_collection" :goodIndex="index" className="order">
          <template v-slot:orderHead>
            <div class="flex-a-c flex-j-sb orderHead">
              <h3>兑换ID：{{item.exchange_collection && item.exchange_collection.order_id}}</h3>
              <p>{{item.status_name}}</p>
            </div>
          </template>
          <template v-slot:orderSum>
            <div class="flex-a-c flex-j-sb order-sum">
              <div class="amount">×{{item.exchange_collection && item.exchange_collection.total}}</div>
              <!-- <div class="price">¥689.00</div> -->
            </div>
          </template>
          <template v-slot:orderAddress>
            <div class="order-address">
              <div class="member-info">会员昵称：{{item.belongs_to_member && item.belongs_to_member.nickname}}</div>
              <div class="address">收货地址：<span>{{item.address && item.address.address}}</span></div>
              <div class="address-btn flex">
                <blcok v-for="(itemBtn,btnIndex) in item.button_models" :key="btnIndex">
                  <div 
                    class="btn"
                    :class="itemBtn.value == 12 ? 'btn-bg':''" 
                    @click.stop="
                      orderstateOn(
                        {
                          value:itemBtn.value,
                          id:item.id,
                          goodsId:item.exchange_collection && item.exchange_collection.goods_id,
                          refundId:item.refund_id,
                          api:itemBtn.api,
                          itemBtn:itemBtn,
                          item:item
                        }
                      )">{{itemBtn.name}}</div>
                </blcok>
              </div>
            </div>
          </template>
        </goods-item>
      </block>
    </div>
    <van-empty description="暂无数据"  v-else/>
    <div class="mb60"></div>
  </div>
</template>

<script>
import orderList_controller from "./orderList_controller";
export default orderList_controller;
</script>
<style scoped>
  .order-page ::v-deep .van-tabs__line {
    bottom:20px;
  }
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .order-list {
    margin:10px 12px 0 12px;
  }
  .mb60 {
    height: 60px;
    clear: both;
  }
</style>